<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>第七节课</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			.container {
				width: 100vw;
				height: 100vh;
				display: flex;
				/*
		     * 将边框设置在中间
		     */
				align-items: center;
				justify-content: center;
			}

			canvas {
				width: 500px;
				height: 500px;
				border: 1px solid #333333;
			}
		</style>
	<body>
		<!-- <img src="../img/img.png" id="img"> -->
		<div class="container">
			<canvas id="canvas" width="500px" height="500px"></canvas>
			<div><input type="button" name="" id="right-btn" value="向右移动" />
				<input type="button" name="" id="left-btn" value="向左移动" />
				<input type="button" name="" id="down-btn" value="向下移动" />
				<br>
				<input type="button" name="" id="off-btn" value="向上移动" />
				<input type="button" name="" id="move" value="清除" /></div>

		</div>
	</body>
	<script>
		window.onload = function() {
			let yCanvas = document.getElementById('canvas');
			console.dir(yCanvas);
			let yPen = yCanvas.getContext("2d");

			yPen.fillRect(100, 100, 100, 100);
			//在x轴上移动xpx,y轴移动ypx;
			//translate(x,y)


			//part1--transla
			// yPen.translate(50, 0);
			// yPen.fillStyle = "red";
			// yPen.fillRect(100, 100, 100, 100);
			// yPen.translate(300, 0);
			// yPen.fillStyle = "skyblue";
			// yPen.fillRect(100, 100, 100, 100);

			// let yRightBtn = document.getElementById('right-btn');
			// yRightBtn.onclick = function() {
			// 	yPen.translate(20, 0);
			// 	yPen.fillRect(100, 100, 100, 100);
			// }

			// let yLeftBtn = document.getElementById('left-btn');
			// yLeftBtn.onclick = function() {
			// 	yPen.translate(-20, 0);
			// 	yPen.fillRect(100, 100, 100, 100);
			// }
			// let yDownBtn = document.getElementById('down-btn');
			// yDownBtn.onclick = function() {
			// 	yPen.translate(0, 20);
			// 	yPen.fillRect(100, 100, 100, 100);
			// }
			// let yOffBtn = document.getElementById('off-btn');
			// yOffBtn.onclick = function() {
			// 	yPen.translate(0, -20);
			// 	yPen.fillRect(100, 100, 100, 100);
			// }

			// function move(x, y) {
			// 	yPen.clearRect(100, 100, 500, 500);
			// 	yPen.translate(x, y);
			// 	yPen.fillRect(100, 100, 100, 100);
			// }



			//part2--scale
			// yPen.fillStyle = "red";
			// let x = 100,
			// 	y = 100,
			// 	width = 100,
			// 	height = 100;
			// yPen.fillRect(x, y, width, height);
			// //x在x轴上缩放x倍
			// let scaleX = 0.5;
			// let scaleY = 0.5;
			// yPen.fillStyle = "green";
			// yPen.translate((x + width / 2) * (1 - sacleX), (y + height / 2) * (1 - scaleY));
			// yPen.scale(scaleX, scaleY);
			// yPen.fillRect(x, y, width, height);


			//part2--rotate
			yPen.fillStyle = "pink";
			let x = 100,
				y = 100,
				width = 100,
				height = 100;
			yPen.fillRect(x, y, width, height);

			setInterval(function() {
				yPen.translate(x + width / 2, y + height / 2);
				yPen.rotate(Math.PI / 180 * 30);
				yPen.translate(-(x + width / 2), -(y + height / 2));
				yPen.clearRect(0, 0, 500, 500);
				yPen.fillRect(x, y, width, height);
			},1)
		}
	</script>
</html>
